<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:pe="http://primefaces.org/ui/extensions">

    <ui:composition template="/view/templates/layout.xhtml">
        <ui:define name="title">Medico</ui:define>        

        <ui:define name="menu">
            <ui:include src="/view/templates/adm-menu.xhtml"/>
        </ui:define>
        <ui:define name="toolbar">
            <h:form id="formMedicoButtons" prependId="true">
                <p:toolbar>  
                    <p:toolbarGroup align="left">
                        <p:outputLabel value="#{msg.tlb_Medico}" style="margin-top: 5px; margin-left: 5px; "/>
                        <p:separator/>
                    </p:toolbarGroup>
                    <p:toolbarGroup align="right">
                        <p:commandButton id="btnNuevo" styleClass="ui-button-custome" value="#{msg.grn_botonNuevo}"  
                                         icon="ui-icon-plus"
                                         update=":formMedicoAlta :formMedicoConsulta" 
                                         actionListener="#{MngMedicosController.executeChangeToCreate}"/>
                        <p:commandButton id="btnConsultar" styleClass="ui-button-custome" value="#{msg.grn_botonConsultar}" 
                                         icon="ui-icon-folder-open"
                                         update=":formMedicoAlta :formMedicoConsulta" 
                                         actionListener="#{MngMedicosController.executeConsultarMedico}"/>
                    </p:toolbarGroup>
                </p:toolbar>
                <br/>
            </h:form>
        </ui:define> 

        <ui:define name="body">
            <p:growl id="growl" globalOnly="true" showSummary="true" showDetail="true" autoUpdate="true" />

            <h:form id="formMedicoConsulta" prependId="true">
                <p:contextMenu for="dTableRetrieveMedico">
                    <p:menuitem value="#{msg.grn_botonActulizar}" icon="ui-icon-pencil"
                                onclick="PF('widgetUpdateMedico').show()"
                                update=":formMedicoActualizar:pGrUpdateMedico"/>
                </p:contextMenu>
                <div id="dataTableStyle">
                    <p:dataTable id="dTableRetrieveMedico" value="#{MngMedicosController.medicoLazyModel}" 
                                 var="varRetrieveMedico"
                                 rendered="#{MngMedicosController.renderPanelConsulta}"
                                 emptyMessage="No pacientes"
                                 selectionMode="single"
                                 rowKey="#{varRetrieveMedico.idMedico}"  
                                 selection="#{MngMedicosController.selectMedico}" 
                                 paginator="true" 
                                 rows="10"
                                 paginatorPosition="bottom"
                                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
                                 rowsPerPageTemplate="5,10,15" 
                                 lazy="true">
                        <p:column headerText="#{msg.obj_personaNombre}" sortBy="nombre" filterBy="#{varRetrieveMedico.nombre}">
                            <p:outputLabel value="#{varRetrieveMedico.nombre}" />
                        </p:column>
                        <p:column headerText="#{msg.obj_personaApPaterno}" sortBy="apPaterno" filterBy="#{varRetrieveMedico.apPaterno}">
                            <p:outputLabel value="#{varRetrieveMedico.apPaterno}" />
                        </p:column>
                    </p:dataTable>
                </div>
            </h:form>
            <h:form id="formMedicoAlta" prependId="true">
                <h:panelGroup rendered="#{MngMedicosController.renderPanelAlta}">
                    <div class="row">
                        <div class="col-md-offset-2 col-md-8">
                            <div class="panel panel-primary">
                                <div class="panel-heading">#{msg.mng_paciente_AddMedico}</div>
                                <div class="panel-body">
                                    <p:panelGrid style="width: 100%">
                                        <p:row>
                                            <p:column>
                                                <p:outputLabel value="#{msg.gr_registrar_Usuario}"/>
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column style="width: 20%">
                                                <h:outputText value="#{msg.obj_usuarioNick}"/>
                                            </p:column>
                                            <p:column style="width: 25%">
                                                <p:inputText id="nick" value="#{MngMedicosController.createMedico.usuario.nick}" style="margin: 5px;" 
                                                             styleClass="#{(RegistrarController.validarUsuario)? 'form-control-error' : 'form-control'}"
                                                             placeholder="#{(RegistrarController.validarUsuario)? msg.gr_registrar_NickUsado : msg.obj_usuarioNick}"
                                                             onfocus="document.getElementById('messageForNick').style.display = 'block';"
                                                             onblur="document.getElementById('messageForNick').style.display = 'none';"
                                                             validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                    <f:validateRegex pattern="[A-Za-z]+"/>
                                                    <p:ajax event="blur" listener="#{RegistrarController.executeValidarUsuario}" update="nick" />
                                                </p:inputText>
                                            </p:column>
                                            <p:column>
                                                <p:message for="nick"/>
                                                <div id="messageForNick"  class="message-validation-div">
                                                    <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                                </div>
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="#{msg.obj_usuarioPass}"/>
                                            </p:column>
                                            <p:column>
                                                <p:password id="pass" value="#{MngMedicosController.createMedico.usuario.pass}" style="margin: 5px;" styleClass="form-control"
                                                            placeholder="#{msg.obj_usuarioPass}"
                                                            onfocus="document.getElementById('messageForPass').style.display = 'block';"
                                                            onblur="document.getElementById('messageForPass').style.display = 'none';"
                                                            requiredMessage="#{msg.vld_campoNecesario}" 
                                                            match="passDos"
                                                            required="true">
                                                    <f:validateRegex pattern="[A-Za-z0-9]{8,}"/>
                                                </p:password>
                                            </p:column>
                                            <p:column>
                                                <p:message for="pass"/>
                                                <div id="messageForPass" class="message-validation-div">
                                                    <h:outputText value="#{msg.gr_datos_alfanumericos}"></h:outputText>
                                                </div>
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="#{msg.obj_usuarioRepeatPass}"/>
                                            </p:column>
                                            <p:column>
                                                <p:password id="passDos" value="#{MngMedicosController.createMedico.usuario.pass}" style="margin: 5px;" styleClass="form-control"
                                                            placeholder="#{msg.obj_usuarioRepeatPass}"
                                                            onfocus="document.getElementById('messageForPassDos').style.display = 'block';"
                                                            onblur="document.getElementById('messageForPassDos').style.display = 'none';"
                                                            validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                    <f:validateRegex pattern="[A-Za-z0-9]+"/>
                                                </p:password>
                                            </p:column>
                                            <p:column>
                                                <p:message for="passDos"/>
                                                <div id="messageForPassDos" class="message-validation-div">
                                                </div>
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <p:outputLabel value="#{msg.grn_datos_Nombre}"/>
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="#{msg.obj_personaNombre}"/>
                                            </p:column>
                                            <p:column>
                                                <p:inputText id="nombre" value="#{MngMedicosController.createMedico.nombre}" style="margin: 5px;" styleClass="form-control"
                                                             placeholder="#{msg.obj_personaNombre}"
                                                             onfocus="document.getElementById('messageForNombre').style.display = 'block';"
                                                             onblur="document.getElementById('messageForNombre').style.display = 'none';"
                                                             validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                    <f:validateRegex pattern="[A-Za-z]+"/>
                                                </p:inputText>
                                            </p:column>
                                            <p:column>
                                                <p:message for="nombre" />
                                                <div id="messageForNombre" class="message-validation-div">
                                                    <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                                </div>
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="#{msg.obj_personaApPaterno}"/>
                                            </p:column>
                                            <p:column>
                                                <p:inputText id="apPaterno" value="#{MngMedicosController.createMedico.apPaterno}" style="margin: 5px;" styleClass="form-control"
                                                             placeholder="#{msg.obj_personaApPaterno}"
                                                             onfocus="document.getElementById('messageForApPaterno').style.display = 'block';"
                                                             onblur="document.getElementById('messageForApPaterno').style.display = 'none';"
                                                             validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                    <f:validateRegex pattern="[A-Za-z]+"/>
                                                </p:inputText>
                                            </p:column>
                                            <p:column>
                                                <p:message for="apPaterno"/>
                                                <div id="messageForApPaterno" class="message-validation-div">
                                                    <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                                </div>
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="#{msg.obj_personaApMaterno}"/>
                                            </p:column>
                                            <p:column>
                                                <p:inputText id="apMaterno" value="#{MngMedicosController.createMedico.apMaterno}" style="margin: 5px;" styleClass="form-control"
                                                             placeholder="#{msg.obj_personaApMaterno}"
                                                             onfocus="document.getElementById('messageForApMaterno').style.display = 'block';"
                                                             onblur="document.getElementById('messageForApMaterno').style.display = 'none';"
                                                             validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                    <f:validateRegex pattern="[A-Za-z]+"/>
                                                </p:inputText>
                                            </p:column>
                                            <p:column>
                                                <p:message for="apMaterno"/>
                                                <div id="messageForApMaterno" class="message-validation-div">
                                                    <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                                </div>
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <p:outputLabel value="#{msg.grn_datos_gr}"/>
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="#{msg.obj_personaGenero}"/>
                                            </p:column>
                                            <p:column>
                                                <div style="width: 185px;">
                                                    <p:selectOneRadio id="genero" value="#{MngMedicosController.createMedico.genero}"  
                                                                      styleClass="ui-radio-button-custome"
                                                                      validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                        <f:selectItem itemLabel="#{msg.obj_personaMasculino}" itemValue="1" />    
                                                        <f:selectItem itemLabel="#{msg.obj_personaFemenino}" itemValue="2" />    
                                                    </p:selectOneRadio>
                                                </div>
                                            </p:column>
                                            <p:column>                                                
                                                <p:message for="genero"/>
                                                <div id="messageForGenero" class="message-validation-div">
                                                    <h:outputText value="#{msg.gr_datos_genero}"></h:outputText>
                                                </div>
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="#{msg.obj_personaCelular}"/>
                                            </p:column>
                                            <p:column>
                                                <p:inputText id="celular" value="#{MngMedicosController.createMedico.celular}" style="margin: 5px;" styleClass="form-control"
                                                             placeholder="#{msg.obj_personaCelular}"
                                                             onfocus="document.getElementById('messageForCelular').style.display = 'block';"
                                                             onblur="document.getElementById('messageForCelular').style.display = 'none';"
                                                             validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                    <f:validateRegex pattern="[0-9-]+"/>
                                                </p:inputText>
                                            </p:column>
                                            <p:column>
                                                <p:message for="celular"/>
                                                <div id="messageForCelular" class="message-validation-div">
                                                    <h:outputText value="#{msg.gr_datos_tel}"></h:outputText>
                                                </div>
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="#{msg.obj_personaTelefono}"/>
                                            </p:column>
                                            <p:column>
                                                <p:inputText id="telefono" value="#{MngMedicosController.createMedico.telefono}" style="margin: 5px;" styleClass="form-control"
                                                             placeholder="#{msg.obj_personaTelefono}"
                                                             onfocus="document.getElementById('messageForTelefono').style.display = 'block';"
                                                             onblur="document.getElementById('messageForTelefono').style.display = 'none';"
                                                             validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                    <f:validateRegex pattern="[0-9-]+"/>
                                                </p:inputText>
                                            </p:column>
                                            <p:column>
                                                <p:message for="telefono"/>
                                                <div id="messageForTelefono" class="message-validation-div">
                                                    <h:outputText value="#{msg.gr_datos_tel}"></h:outputText>
                                                </div>
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="#{msg.obj_personaEmail}"/>
                                            </p:column>
                                            <p:column>
                                                <p:inputText id="email" value="#{MngMedicosController.createMedico.email}" style="margin: 5px;" styleClass="form-control"
                                                             placeholder="#{msg.obj_personaEmail}"
                                                             onfocus="document.getElementById('messageForEmail').style.display = 'block';"
                                                             onblur="document.getElementById('messageForEmail').style.display = 'none';"
                                                             validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                    <f:validateRegex pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}$" />
                                                </p:inputText>
                                            </p:column>
                                            <p:column>
                                                <p:message for="email"/>
                                                <div id="messageForEmail" class="message-validation-div">
                                                    <h:outputText value="#{msg.gr_datos_email}"></h:outputText>
                                                </div>
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <p:outputLabel value="#{msg.grn_datos_Domicilio}"/>
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="#{msg.obj_personaCiudad}"/>
                                            </p:column>
                                            <p:column>
                                                <p:inputText id="ciudad" value="#{MngMedicosController.createMedico.ciudad}" style="margin: 5px;" styleClass="form-control"
                                                             placeholder="#{msg.obj_personaCiudad}"
                                                             onfocus="document.getElementById('messageForCiudad').style.display = 'block';"
                                                             onblur="document.getElementById('messageForCiudad').style.display = 'none';"
                                                             validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                    <f:validateRegex pattern="[A-Za-zéó ]+"/>   
                                                </p:inputText>
                                            </p:column>
                                            <p:column>
                                                <p:message for="ciudad"/>
                                                <div id="messageForCiudad" class="message-validation-div">
                                                    <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                                </div>
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="#{msg.obj_personaEstado}"/>
                                            </p:column>
                                            <p:column>
                                                <p:selectOneMenu id="estado" value="#{MngMedicosController.createMedico.estado}"
                                                                 requiredMessage="#{msg.vld_campoNecesario}" required="true"
                                                                 style="margin-left: 5px !important; width: 280px !important">
                                                    <f:selectItem itemLabel="#{msg.grn_selectOption}" itemValue="" />
                                                    <f:selectItem itemLabel="Aguascalientes" itemValue="Aguascalientes" />
                                                    <f:selectItem itemLabel="Baja California" itemValue="Baja California" />
                                                    <f:selectItem itemLabel="Baja California Sur" itemValue="Baja California Sur" />
                                                    <f:selectItem itemLabel="Campeche" itemValue="Campeche" />
                                                    <f:selectItem itemLabel="Chiapas" itemValue="Chiapas" />
                                                    <f:selectItem itemLabel="Chihuahua" itemValue="Chihuahua" />
                                                    <f:selectItem itemLabel="Coahuila" itemValue="Coahuila" />
                                                    <f:selectItem itemLabel="Colima" itemValue="Colima" />
                                                    <f:selectItem itemLabel="Distrito Federal" itemValue="Distrito Federal" />
                                                    <f:selectItem itemLabel="Durango" itemValue="Durango" />
                                                    <f:selectItem itemLabel="Estado de México" itemValue="Estado de México" />
                                                    <f:selectItem itemLabel="Guanajuato" itemValue="Guanajuato" />
                                                    <f:selectItem itemLabel="Guerrero" itemValue="Guerrero" />
                                                    <f:selectItem itemLabel="Hidalgo" itemValue="Hidalgo" />
                                                    <f:selectItem itemLabel="Jalisco" itemValue="Jalisco" />
                                                    <f:selectItem itemLabel="Michoacán" itemValue="Michoacán" />
                                                    <f:selectItem itemLabel="Morelos" itemValue="Morelos" />
                                                    <f:selectItem itemLabel="Nayarit" itemValue="Nayarit" />
                                                    <f:selectItem itemLabel="Nuevo León" itemValue="Nuevo León" />
                                                    <f:selectItem itemLabel="Oaxaca" itemValue="Oaxaca" />
                                                    <f:selectItem itemLabel="Puebla" itemValue="Puebla" />
                                                    <f:selectItem itemLabel="Querétaro" itemValue="Querétaro" />
                                                    <f:selectItem itemLabel="Quintana Roo" itemValue="Quintana Roo" />
                                                    <f:selectItem itemLabel="San Luis Potosí" itemValue="San Luis Potosí" />
                                                    <f:selectItem itemLabel="Sinaloa" itemValue="Sinaloa" />
                                                    <f:selectItem itemLabel="Sonora" itemValue="Sonora" />
                                                    <f:selectItem itemLabel="Tabasco" itemValue="Tabasco" />
                                                    <f:selectItem itemLabel="Tamaulipas" itemValue="Tamaulipas" />
                                                    <f:selectItem itemLabel="Tlaxcala" itemValue="Tlaxcala" />
                                                    <f:selectItem itemLabel="Veracruz" itemValue="Veracruz" />
                                                    <f:selectItem itemLabel="Yucatán" itemValue="Yucatán" />
                                                    <f:selectItem itemLabel="Zacatecas" itemValue="Zacatecas" />
                                                </p:selectOneMenu>
                                            </p:column>
                                            <p:column>
                                                <p:message for="estado"/>
                                                <div id="messageForEstado" class="message-validation-div">
                                                    <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                                </div>
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="#{msg.obj_personaColonia}"/>
                                            </p:column>
                                            <p:column>
                                                <p:inputText id="colonia" value="#{MngMedicosController.createMedico.colonia}" style="margin: 5px;" styleClass="form-control"
                                                             placeholder="#{msg.obj_personaColonia}"
                                                             onfocus="document.getElementById('messageForColonia').style.display = 'block';"
                                                             onblur="document.getElementById('messageForColonia').style.display = 'none';"
                                                             validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                    <f:validateRegex pattern="[A-Za-z0-9]+"/>
                                                </p:inputText>
                                            </p:column>
                                            <p:column>
                                                <p:message for="colonia"/>
                                                <div id="messageForColonia" class="message-validation-div">
                                                    <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                                </div>
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="#{msg.obj_personaCodigoPostal}"/>
                                            </p:column>
                                            <p:column>
                                                <p:inputText id="cp" value="#{MngMedicosController.createMedico.codigoPostal}" style="margin: 5px;" styleClass="form-control"
                                                             placeholder="#{msg.obj_personaCodigoPostal}"
                                                             onfocus="document.getElementById('messageForCP').style.display = 'block';"
                                                             onblur="document.getElementById('messageForCP').style.display = 'none';"
                                                             validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                    <f:validateRegex pattern="[0-9]{5}"/>
                                                </p:inputText>
                                            </p:column>
                                            <p:column>
                                                <p:message for="cp"/>
                                                <div id="messageForCP" class="message-validation-div">
                                                    <h:outputText value="#{msg.gr_datos_cp}"></h:outputText>
                                                </div>
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <p:outputLabel value="#{msg.grn_datos_md}"/>
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="#{msg.obj_medicoEspecialidad}"/>
                                            </p:column>
                                            <p:column>
                                                <p:inputText id="especialidad" value="#{MngMedicosController.createMedico.especialidad}" style="margin: 5px;" styleClass="form-control"
                                                             placeholder="#{msg.obj_medicoEspecialidad}"
                                                             onfocus="document.getElementById('messageForEspecialidad').style.display = 'block';"
                                                             onblur="document.getElementById('messageForEspecialidad').style.display = 'none';"
                                                             validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                    <f:validateRegex pattern="[A-Za-z]+"/>
                                                </p:inputText>
                                            </p:column>
                                            <p:column>
                                                <p:message for="especialidad"/>
                                                <div id="messageForEspecialidad" class="message-validation-div">
                                                    <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                                </div>
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="#{msg.obj_medicoCedula}"/>
                                            </p:column>
                                            <p:column>
                                                <p:inputText id="cedula" value="#{MngMedicosController.createMedico.cedula}" style="margin: 5px;" styleClass="form-control"
                                                             placeholder="#{msg.obj_medicoCedula}"
                                                             onfocus="document.getElementById('messageForCedula').style.display = 'block';"
                                                             onblur="document.getElementById('messageForCedula').style.display = 'none';"
                                                             validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                    <f:validateRegex pattern="[A-Za-z0-9]+"/>
                                                </p:inputText>
                                            </p:column>
                                            <p:column>
                                                <p:message for="cedula"/>
                                                <div id="messageForCedula" class="message-validation-div">
                                                    <h:outputText value="#{msg.gr_datos_cedula}"></h:outputText>
                                                </div>
                                            </p:column>
                                        </p:row>
                                    </p:panelGrid>
                                </div>
                                <div class="panel-footer">
                                    <center>
                                        <p:commandButton id="btnAgregar" styleClass="ui-button-custome" value="#{msg.grn_botonNuevo}"  update=":formMedicoAlta" 
                                                         actionListener="#{MngMedicosController.executeCrearMedico}"/>
                                        <p:commandButton id="btnLimpiar" styleClass="ui-button-custome" value="#{msg.grn_botonLimpiar}"
                                                         actionListener="#{MngMedicosController.executeLimpiarObjects}">
                                            <p:ajax update=":formMedicoAlta" resetValues="true" />  
                                        </p:commandButton>
                                    </center>
                                </div>
                            </div>
                        </div>
                    </div>
                </h:panelGroup>
            </h:form>

            <h:form id="formMedicoActualizar" prependId="true">
                <p:dialog id="diUpdateMedico" widgetVar="widgetUpdateMedico" 
                          showEffect="clip" hideEffect="fold" modal="true">
                    <p:scrollPanel mode="native" style="height:500px">
                        <p:panelGrid id="pGrUpdateMedico" style="width: 750px">
                            <p:row>
                                <p:column>
                                    <p:outputLabel value="#{msg.gr_registrar_Usuario}"/>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column style="width: 20%">
                                    <h:outputText value="#{msg.obj_usuarioNick}"/>
                                </p:column>
                                <p:column style="width: 25%">
                                    <p:inputText id="nick" value="#{MngMedicosController.selectMedico.usuario.nick}" style="margin: 5px;" 
                                                 styleClass="#{(RegistrarController.validarUsuario)? 'form-control-error' : 'form-control'}"
                                                 placeholder="#{(RegistrarController.validarUsuario)? msg.gr_registrar_NickUsado : msg.obj_usuarioNick}"
                                                 onfocus="document.getElementById('messageForNick').style.display = 'block';"
                                                 onblur="document.getElementById('messageForNick').style.display = 'none';"
                                                 validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                        <f:validateRegex pattern="[A-Za-z]+"/>
                                        <p:ajax event="blur" listener="#{RegistrarController.executeValidarUsuario}" update="nick" />
                                    </p:inputText>
                                </p:column>
                                <p:column>
                                    <p:message for="nick"/>
                                    <div id="messageForNick"  class="message-validation-div">
                                        <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                    </div>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText value="#{msg.obj_usuarioPass}"/>
                                </p:column>
                                <p:column>
                                    <p:password id="pass" value="#{MngMedicosController.selectMedico.usuario.pass}" style="margin: 5px;" styleClass="form-control"
                                                placeholder="#{msg.obj_usuarioPass}"
                                                onfocus="document.getElementById('messageForPass').style.display = 'block';"
                                                onblur="document.getElementById('messageForPass').style.display = 'none';"
                                                requiredMessage="#{msg.vld_campoNecesario}" 
                                                match="passDos"
                                                required="true">
                                        <f:validateRegex pattern="[A-Za-z0-9]{8,}"/>
                                    </p:password>
                                </p:column>
                                <p:column>
                                    <p:message for="pass"/>
                                    <div id="messageForPass" class="message-validation-div">
                                        <h:outputText value="#{msg.gr_datos_alfanumericos}"></h:outputText>
                                    </div>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText value="#{msg.obj_usuarioRepeatPass}"/>
                                </p:column>
                                <p:column>
                                    <p:password id="passDos" value="#{MngMedicosController.selectMedico.usuario.pass}" style="margin: 5px;" styleClass="form-control"
                                                placeholder="#{msg.obj_usuarioRepeatPass}"
                                                onfocus="document.getElementById('messageForPassDos').style.display = 'block';"
                                                onblur="document.getElementById('messageForPassDos').style.display = 'none';"
                                                validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                        <f:validateRegex pattern="[A-Za-z0-9]+"/>
                                    </p:password>
                                </p:column>
                                <p:column>
                                    <p:message for="passDos"/>
                                    <div id="messageForPassDos" class="message-validation-div">
                                    </div>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <p:outputLabel value="#{msg.grn_datos_Nombre}"/>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText value="#{msg.obj_personaNombre}"/>
                                </p:column>
                                <p:column>
                                    <p:inputText id="nombre" value="#{MngMedicosController.selectMedico.nombre}" style="margin: 5px;" styleClass="form-control"
                                                 placeholder="#{msg.obj_personaNombre}"
                                                 onfocus="document.getElementById('messageForNombre').style.display = 'block';"
                                                 onblur="document.getElementById('messageForNombre').style.display = 'none';"
                                                 validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                        <f:validateRegex pattern="[A-Za-z]+"/>
                                    </p:inputText>
                                </p:column>
                                <p:column>
                                    <p:message for="nombre" />
                                    <div id="messageForNombre" class="message-validation-div">
                                        <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                    </div>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText value="#{msg.obj_personaApPaterno}"/>
                                </p:column>
                                <p:column>
                                    <p:inputText id="apPaterno" value="#{MngMedicosController.selectMedico.apPaterno}" style="margin: 5px;" styleClass="form-control"
                                                 placeholder="#{msg.obj_personaApPaterno}"
                                                 onfocus="document.getElementById('messageForApPaterno').style.display = 'block';"
                                                 onblur="document.getElementById('messageForApPaterno').style.display = 'none';"
                                                 validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                        <f:validateRegex pattern="[A-Za-z]+"/>
                                    </p:inputText>
                                </p:column>
                                <p:column>
                                    <p:message for="apPaterno"/>
                                    <div id="messageForApPaterno" class="message-validation-div">
                                        <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                    </div>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText value="#{msg.obj_personaApMaterno}"/>
                                </p:column>
                                <p:column>
                                    <p:inputText id="apMaterno" value="#{MngMedicosController.selectMedico.apMaterno}" style="margin: 5px;" styleClass="form-control"
                                                 placeholder="#{msg.obj_personaApMaterno}"
                                                 onfocus="document.getElementById('messageForApMaterno').style.display = 'block';"
                                                 onblur="document.getElementById('messageForApMaterno').style.display = 'none';"
                                                 validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                        <f:validateRegex pattern="[A-Za-z]+"/>
                                    </p:inputText>
                                </p:column>
                                <p:column>
                                    <p:message for="apMaterno"/>
                                    <div id="messageForApMaterno" class="message-validation-div">
                                        <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                    </div>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <p:outputLabel value="#{msg.grn_datos_gr}"/>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText value="#{msg.obj_personaGenero}"/>
                                </p:column>
                                <p:column>
                                    <div style="width: 185px;">
                                        <p:selectOneRadio id="genero" value="#{MngMedicosController.selectMedico.genero}"  
                                                          styleClass="ui-radio-button-custome"
                                                          validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                            <f:selectItem itemLabel="#{msg.obj_personaMasculino}" itemValue="1" />    
                                            <f:selectItem itemLabel="#{msg.obj_personaFemenino}" itemValue="2" />    
                                        </p:selectOneRadio>
                                    </div>
                                </p:column>
                                <p:column>                                                
                                    <p:message for="genero"/>
                                    <div id="messageForGenero" class="message-validation-div">
                                        <h:outputText value="#{msg.gr_datos_genero}"></h:outputText>
                                    </div>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText value="#{msg.obj_personaCelular}"/>
                                </p:column>
                                <p:column>
                                    <p:inputText id="celular" value="#{MngMedicosController.selectMedico.celular}" style="margin: 5px;" styleClass="form-control"
                                                 placeholder="#{msg.obj_personaCelular}"
                                                 onfocus="document.getElementById('messageForCelular').style.display = 'block';"
                                                 onblur="document.getElementById('messageForCelular').style.display = 'none';"
                                                 validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                        <f:validateRegex pattern="[0-9-]+"/>
                                    </p:inputText>
                                </p:column>
                                <p:column>
                                    <p:message for="celular"/>
                                    <div id="messageForCelular" class="message-validation-div">
                                        <h:outputText value="#{msg.gr_datos_tel}"></h:outputText>
                                    </div>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText value="#{msg.obj_personaTelefono}"/>
                                </p:column>
                                <p:column>
                                    <p:inputText id="telefono" value="#{MngMedicosController.selectMedico.telefono}" style="margin: 5px;" styleClass="form-control"
                                                 placeholder="#{msg.obj_personaTelefono}"
                                                 onfocus="document.getElementById('messageForTelefono').style.display = 'block';"
                                                 onblur="document.getElementById('messageForTelefono').style.display = 'none';"
                                                 validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                        <f:validateRegex pattern="[0-9-]+"/>
                                    </p:inputText>
                                </p:column>
                                <p:column>
                                    <p:message for="telefono"/>
                                    <div id="messageForTelefono" class="message-validation-div">
                                        <h:outputText value="#{msg.gr_datos_tel}"></h:outputText>
                                    </div>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText value="#{msg.obj_personaEmail}"/>
                                </p:column>
                                <p:column>
                                    <p:inputText id="email" value="#{MngMedicosController.selectMedico.email}" style="margin: 5px;" styleClass="form-control"
                                                 placeholder="#{msg.obj_personaEmail}"
                                                 onfocus="document.getElementById('messageForEmail').style.display = 'block';"
                                                 onblur="document.getElementById('messageForEmail').style.display = 'none';"
                                                 validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                        <f:validateRegex pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}$" />
                                    </p:inputText>
                                </p:column>
                                <p:column>
                                    <p:message for="email"/>
                                    <div id="messageForEmail" class="message-validation-div">
                                        <h:outputText value="#{msg.gr_datos_email}"></h:outputText>
                                    </div>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <p:outputLabel value="#{msg.grn_datos_Domicilio}"/>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText value="#{msg.obj_personaCiudad}"/>
                                </p:column>
                                <p:column>
                                    <p:inputText id="ciudad" value="#{MngMedicosController.selectMedico.ciudad}" style="margin: 5px;" styleClass="form-control"
                                                 placeholder="#{msg.obj_personaCiudad}"
                                                 onfocus="document.getElementById('messageForCiudad').style.display = 'block';"
                                                 onblur="document.getElementById('messageForCiudad').style.display = 'none';"
                                                 validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                        <f:validateRegex pattern="[A-Za-zéó ]+"/>   
                                    </p:inputText>
                                </p:column>
                                <p:column>
                                    <p:message for="ciudad"/>
                                    <div id="messageForCiudad" class="message-validation-div">
                                        <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                    </div>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText value="#{msg.obj_personaEstado}"/>
                                </p:column>
                                <p:column>
                                    <p:selectOneMenu id="estado" value="#{MngMedicosController.selectMedico.estado}"
                                                     requiredMessage="#{msg.vld_campoNecesario}" required="true"
                                                     style="margin-left: 5px !important; width: 280px !important">
                                        <f:selectItem itemLabel="#{msg.grn_selectOption}" itemValue="" />
                                        <f:selectItem itemLabel="Aguascalientes" itemValue="Aguascalientes" />
                                        <f:selectItem itemLabel="Baja California" itemValue="Baja California" />
                                        <f:selectItem itemLabel="Baja California Sur" itemValue="Baja California Sur" />
                                        <f:selectItem itemLabel="Campeche" itemValue="Campeche" />
                                        <f:selectItem itemLabel="Chiapas" itemValue="Chiapas" />
                                        <f:selectItem itemLabel="Chihuahua" itemValue="Chihuahua" />
                                        <f:selectItem itemLabel="Coahuila" itemValue="Coahuila" />
                                        <f:selectItem itemLabel="Colima" itemValue="Colima" />
                                        <f:selectItem itemLabel="Distrito Federal" itemValue="Distrito Federal" />
                                        <f:selectItem itemLabel="Durango" itemValue="Durango" />
                                        <f:selectItem itemLabel="Estado de México" itemValue="Estado de México" />
                                        <f:selectItem itemLabel="Guanajuato" itemValue="Guanajuato" />
                                        <f:selectItem itemLabel="Guerrero" itemValue="Guerrero" />
                                        <f:selectItem itemLabel="Hidalgo" itemValue="Hidalgo" />
                                        <f:selectItem itemLabel="Jalisco" itemValue="Jalisco" />
                                        <f:selectItem itemLabel="Michoacán" itemValue="Michoacán" />
                                        <f:selectItem itemLabel="Morelos" itemValue="Morelos" />
                                        <f:selectItem itemLabel="Nayarit" itemValue="Nayarit" />
                                        <f:selectItem itemLabel="Nuevo León" itemValue="Nuevo León" />
                                        <f:selectItem itemLabel="Oaxaca" itemValue="Oaxaca" />
                                        <f:selectItem itemLabel="Puebla" itemValue="Puebla" />
                                        <f:selectItem itemLabel="Querétaro" itemValue="Querétaro" />
                                        <f:selectItem itemLabel="Quintana Roo" itemValue="Quintana Roo" />
                                        <f:selectItem itemLabel="San Luis Potosí" itemValue="San Luis Potosí" />
                                        <f:selectItem itemLabel="Sinaloa" itemValue="Sinaloa" />
                                        <f:selectItem itemLabel="Sonora" itemValue="Sonora" />
                                        <f:selectItem itemLabel="Tabasco" itemValue="Tabasco" />
                                        <f:selectItem itemLabel="Tamaulipas" itemValue="Tamaulipas" />
                                        <f:selectItem itemLabel="Tlaxcala" itemValue="Tlaxcala" />
                                        <f:selectItem itemLabel="Veracruz" itemValue="Veracruz" />
                                        <f:selectItem itemLabel="Yucatán" itemValue="Yucatán" />
                                        <f:selectItem itemLabel="Zacatecas" itemValue="Zacatecas" />
                                    </p:selectOneMenu>
                                </p:column>
                                <p:column>
                                    <p:message for="estado"/>
                                    <div id="messageForEstado" class="message-validation-div">
                                        <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                    </div>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText value="#{msg.obj_personaColonia}"/>
                                </p:column>
                                <p:column>
                                    <p:inputText id="colonia" value="#{MngMedicosController.selectMedico.colonia}" style="margin: 5px;" styleClass="form-control"
                                                 placeholder="#{msg.obj_personaColonia}"
                                                 onfocus="document.getElementById('messageForColonia').style.display = 'block';"
                                                 onblur="document.getElementById('messageForColonia').style.display = 'none';"
                                                 validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                        <f:validateRegex pattern="[A-Za-z0-9]+"/>
                                    </p:inputText>
                                </p:column>
                                <p:column>
                                    <p:message for="colonia"/>
                                    <div id="messageForColonia" class="message-validation-div">
                                        <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                    </div>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText value="#{msg.obj_personaCodigoPostal}"/>
                                </p:column>
                                <p:column>
                                    <p:inputText id="cp" value="#{MngMedicosController.selectMedico.codigoPostal}" style="margin: 5px;" styleClass="form-control"
                                                 placeholder="#{msg.obj_personaCodigoPostal}"
                                                 onfocus="document.getElementById('messageForCP').style.display = 'block';"
                                                 onblur="document.getElementById('messageForCP').style.display = 'none';"
                                                 validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                        <f:validateRegex pattern="[0-9]{5}"/>
                                    </p:inputText>
                                </p:column>
                                <p:column>
                                    <p:message for="cp"/>
                                    <div id="messageForCP" class="message-validation-div">
                                        <h:outputText value="#{msg.gr_datos_cp}"></h:outputText>
                                    </div>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <p:outputLabel value="#{msg.grn_datos_md}"/>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText value="#{msg.obj_medicoEspecialidad}"/>
                                </p:column>
                                <p:column>
                                    <p:inputText id="especialidad" value="#{MngMedicosController.selectMedico.especialidad}" style="margin: 5px;" styleClass="form-control"
                                                 placeholder="#{msg.obj_medicoEspecialidad}"
                                                 onfocus="document.getElementById('messageForEspecialidad').style.display = 'block';"
                                                 onblur="document.getElementById('messageForEspecialidad').style.display = 'none';"
                                                 validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                        <f:validateRegex pattern="[A-Za-z]+"/>
                                    </p:inputText>
                                </p:column>
                                <p:column>
                                    <p:message for="especialidad"/>
                                    <div id="messageForEspecialidad" class="message-validation-div">
                                        <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                    </div>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText value="#{msg.obj_medicoCedula}"/>
                                </p:column>
                                <p:column>
                                    <p:inputText id="cedula" value="#{MngMedicosController.selectMedico.cedula}" style="margin: 5px;" styleClass="form-control"
                                                 placeholder="#{msg.obj_medicoCedula}"
                                                 onfocus="document.getElementById('messageForCedula').style.display = 'block';"
                                                 onblur="document.getElementById('messageForCedula').style.display = 'none';"
                                                 validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                        <f:validateRegex pattern="[A-Za-z0-9]+"/>
                                    </p:inputText>
                                </p:column>
                                <p:column>
                                    <p:message for="cedula"/>
                                    <div id="messageForCedula" class="message-validation-div">
                                        <h:outputText value="#{msg.gr_datos_cedula}"></h:outputText>
                                    </div>
                                </p:column>
                            </p:row>
                        </p:panelGrid>
                    </p:scrollPanel>
                    <f:facet name="footer" >
                        <center>
                            <p:commandButton id="btnModificar" styleClass="ui-button-custome" value="#{msg.grn_botonModificar}" update="pGrUpdateMedico" 
                                             actionListener="#{MngMedicosController.executeActualizarMedico}"/>
                        </center>
                    </f:facet>
                </p:dialog>
            </h:form>

            <h:form id="formMedicoEliminar" prependId="true">
                <p:confirmDialog id="cDiDeleteMedico" widgetVar="widgetDeleteMedico" header="#{msg.grn_botonEliminar}" 
                                 closable="true" hideEffect="explode">
                    <f:facet name="message">
                        <h:outputText value="#{msg.grn_eliminarRegistro}" />
                    </f:facet>
                    <p:commandButton value="#{msg.grn_botonSi}" actionListener="#{MngMedicosController.executeEliminarMedico}" 
                                     style="margin-left: 10px;"
                                     update=":formMedicoConsulta"
                                     onclick="PF('widgetDeleteMedico').hide()"
                                     styleClass="ui-button-custome" icon="ui-icon-check"/>  
                    <p:commandButton value="#{msg.grn_botonNo}" type="button" onclick="PF('widgetDeleteMedico').hide()"
                                     styleClass="ui-button-custome" icon="ui-icon-close"/>                 
                </p:confirmDialog>
            </h:form>
        </ui:define>
    </ui:composition>
</html>

